<!--
 * @Author: windys
 * @Description: 购买立即赠
 * @Date: 2022-02-23 09:45:46
-->
<template>
  <van-dialog
    v-model:show="show"
    title="购买赠送"
    show-cancel-button
    @confirm="confirm"
    theme="round-button"
  >
    <div class="content">
      <div class="list_container">
        <div v-for="item in list" :key="item.id" class="item">
          <div class="left">
            <van-image width="100" height="60" :src="item.coverUrl" />
          </div>
          <div class="right">
            <div class="name">{{ item.goodsName }}</div>
            <div class="info">
              <img :src="item.headUrl" alt="" srcset="" />
              <span>{{ item.spName }}</span>
            </div>
            <span class="time">有效期{{ item.days }}天</span>
          </div>
        </div>
      </div>
    </div>
  </van-dialog>
</template>

<script >
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup(props, { emit }) {
    const show = ref(false);
    const list = ref([]);
    const params = ref({});
    const confirm = () => {
      emit("confirm", params.value);
    };
    return {
      show,
      list,
      params,
      confirm,
    };
  },
});
</script>




<style lang="scss" scoped>
.content {
  font-size: 14px;
  max-height: 300px;
  overflow-y: auto;
  color: #000;
  margin-top: 20px;
  .list_container {
    display: flex;
    flex-direction: column;
    padding: 10px;
    .item {
      height: 70px;
      overflow: hidden;
      display: flex;
      margin-bottom: 10px;
      .left {
        overflow: hidden;
        width: 100px;
      }
      .right {
        width: calc(100% - 100px);
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        position: relative;
        .name {
          font-size: 14px;
          margin-bottom: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .info {
          display: flex;
          height: 20px;
          line-height: 20px;
          span {
            margin-left: 5px;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        img {
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
        .time {
          position: absolute;
          bottom: 20px;
          right: 0;
          font-size: 10px;
          color: red;
          border: 1px solid red;
          padding: 2px 5px;
          border-radius: 20px;
        }
      }
    }
  }
}
</style>